<template>
  <div id="map" style="width: 1200px; height: 900px"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import MindElixir from 'mind-elixir'
import nodeMenu from "@/views/xmindExtend/nodeMenu/nodeMenu";

let meInstance = null

onMounted(() => {
  let options = {
    el: document.getElementById('map'), // 或 HTMLDivElement
    direction: MindElixir.SIDE,
    draggable: true, // 默认 true
    contextMenu: true, // 默认 true
    toolBar: true, // 默认 true
    nodeMenu: true, // 默认 true
    keypress: true, // 默认 true
    locale: 'zh_CN', // [zh_CN,zh_TW,en,ja,pt,ru] 等待 PRs
    overflowHidden: false, // 默认 false
    mainLinkStyle: 2, // [1,2] 默认 1
    mouseSelectionButton: 0, // 0 为左键，2 为右键，默认 0
    contextMenuOption: {
      focus: true,
      link: true,
      extend: [
        {
          name: '节点编辑',
          onclick: () => {
            alert('扩展菜单')
          },
        },
      ],
    },
    // before: {
    //   insertSibling(el, obj) {
    //     return true
    //   },
    //   async addChild(el, obj) {
    //     await sleep()
    //     return true
    //   },
    // },
  }

  meInstance = new MindElixir(options)
  meInstance.install(nodeMenu)
  const data = MindElixir.new('new topic')
  meInstance.init(data)
})
</script>